<template>
  <div class="friendApply">
    <p class="pending" v-show="requestList.filter(item => item.invitation_state === 0).length">待处理</p>
    <ul class="pendingList" v-show="requestList.filter(item => item.invitation_state === 0).length">
      <li v-for="item in requestList.filter(item => item.invitation_state === 0)" :key="item.invitation_id" @dblclick="jumpToChat(item)">
        <div class="avatarBox">
          <avatar :showuserinfo="'&' + item.user_id" :imgID="item.user_img" :id="item.user_id"></avatar>
        </div>
        <div class="userInfo">
          <p class="userName">{{ item.user_name }}</p>
          <p class="message">{{ item.invitation_msg }}</p>
        </div>
        <div :class="{'operate': true, 'examine': true }" @click="examine(item)">查看</div>
      </li>
    </ul>
    <p class="processed" v-show="requestList.filter(item => item.invitation_state !== 0).length">已处理</p>
    <ul class="processedList" v-show="requestList.filter(item => item.invitation_state !== 0).length">
      <li v-for="item in requestList.filter(item => item.invitation_state !== 0)" :key="item.invitation_id" @dblclick="jumpToChat(item)">
        <div class="avatarBox">
          <avatar :showuserinfo="'&' + item.user_id" :imgID="item.user_img" :id="item.user_id"></avatar>
        </div>
        <div class="userInfo">
          <p class="userName">{{ $store.state.chatInformation.userList[item.user_id] ? ($store.state.chatInformation.userList[item.user_id].remarks ? $store.state.chatInformation.userList[item.user_id].remarks : $store.state.chatInformation.userList[item.user_id].user_name) : item.user_name }}</p>
          <p class="message">{{ item.invitation_msg }}</p>
        </div>
        <div :class="{'operate': true, 'otherState': true }">{{ item.invitation_state === 1 ? '已接受' : item.is_invited ? '已拒绝': '对方已拒绝'}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import Avatar from '../../../../components/avatar'
export default {
  components: { Avatar },
  computed: {
    requestList () {
      return this.$store.state.addressList.requestList
    }
  },
  methods: {
    // 获取好友请求列表
    getRequestList () {
      this.$store.dispatch('addressList/getFriendsRequestList')
    },
    // 查看
    examine (item) {
      this.$store.dispatch('addressList/examineRequestDetail', item.invitation_id).then(res => {
        if (res.data && res.data.code === 200) {
          const userInfo = {
            user_img: item.user_img,
            user_name: item.user_name,
            user_id: item.user_id,
            user_phone: res.data.data.user_phone,
            invitation_msg: item.invitation_msg,
            invitation_id: item.invitation_id
          }
          this.$store.commit('addressList/set_userInfo', userInfo)
          this.$store.commit('addressList/set_recentAgreeId', item.user_id)
          this.$store.commit('common/set_userInfoType', 2)
          this.$store.commit('common/set_ifShowUserInfo', true)
        }
      })
    },
    // 跳转聊天
    jumpToChat (item) {
      this.$store.commit('chatInformation/set_topContact', {
        id_type: 1,
        in_contact: this.tools.isFriend(item.user_id),
        timestamp: +new Date(),
        messages: [],
        id: item.user_id,
        name: item.remarks ? item.remarks : item.user_name,
        draft: ''
      })
      this.$store.commit('chatInformation/set_current_contact', {
        id: item.user_id,
        id_type: 1,
        in_contact: this.tools.isFriend(item.user_id)
      })
      this.$router.push('/message')
    }
  },
  mounted () {
    this.getRequestList()
  }
}
</script>

<style scoped lang="scss">
.friendApply {
  padding: 10px 20px 0;
  .pending, .processed {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #EBEDF3;
    font-size: 14px;
    color: #2E3F64;
    margin-bottom: 8px;
  }
  .pendingList, .processedList {
    margin: 0 -20px 11px;
    li {
      height: 56px;
      padding: 0 20px;
      position: relative;
      cursor: pointer;
      .avatarBox {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        height: 40px;
        width: 40px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0;
        }
      }
      .userInfo {
        position: absolute;
        top: 8px;
        left: 72px;
        .userName {
          color: #0D172C;
          font-size: 14px;
          margin-bottom: 3px;
        }
        .message {
          color: #5F7196;
          font-size: 12px;
        }
      }
      .operate {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 20px;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        height: 32px;
        line-height: 32px;
      }
      .examine {
        border-color: #304EEC;
        color: #304EEC;
        cursor: pointer;
      }
      .otherState {
        border-color: #9EAAC4;
        color: #9EAAC4;
      }
      &:hover {
        background-color: rgba(48,78,236,0.05);
      }
    }
  }
}
</style>
